<template>
  <div>
    <ul>
      <!-- 数组 -->
      <li v-for="(item, index) in arr" :key="index">{{ item }} {{ index }}</li>
    </ul>
    <ul>
      <!-- 对象 -->
      <li v-for="item in stuArr" :key="item.id">
        {{ item.name }}
        {{ item.sex }}
        {{ item.hobby }}
      </li>
    </ul>
  </div>
</template>

<script>
// 目标：v-for的使用
// 作用：循环创建标签

// 注意1：想让谁循环创建，就把v-for写在谁身上
// 语法：v-for=“(值变量名，索引变量名)in 目标结构”
// 语法：v-for=“值变量名 in 目标结构”
// 注意2：v-for临时变量名，不能写在标签外面的地方


export default {

  data () {
    return {
      arr: ['姐姐', '妹妹', '弟弟', '哥哥'],
      stuArr: [
        {
          id: 1001,
          name: "孙悟空",
          sex: "男",
          hobby: "吃桃子",
        },
        {
          id: 1002,
          name: "猪八戒",
          sex: "男",
          hobby: "背媳妇",
        }
      ]


    }
  }
}
</script>

<style>
</style>
